<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if gt IE 9]> <html lang="en" class="ie"> <![endif]-->
<!--[if !IE]><!-->
<html dir="ltr" lang="en">
	<!--<![endif]-->

	<head>
		<meta charset="utf-8">
		<title>The Project | Home Resume</title>
		<meta name="description" content="The Project a Bootstrap-based, Responsive HTML5 Template">
		<meta name="author" content="htmlcoder.me">

		<!-- Mobile Meta -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Favicon -->
		<link rel="shortcut icon" href="images/favicon.ico">

		<!-- Web Fonts -->
		<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,300' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=PT+Serif' rel='stylesheet' type='text/css'>

		<!-- Bootstrap core CSS -->
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

		<!-- Font Awesome CSS -->
		<link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet">

		<!-- Fontello CSS -->
		<link href="fonts/fontello/css/fontello.css" rel="stylesheet">

		<!-- Plugins -->
		<link href="plugins/magnific-popup/magnific-popup.css" rel="stylesheet">
		<link href="plugins/rs-plugin-5/css/settings.css" rel="stylesheet">
		<link href="plugins/rs-plugin-5/css/layers.css" rel="stylesheet">
		<link href="plugins/rs-plugin-5/css/navigation.css" rel="stylesheet">
		<link href="css/animations.css" rel="stylesheet">
		<link href="plugins/owlcarousel2/assets/owl.carousel.min.css" rel="stylesheet">
		<link href="plugins/owlcarousel2/assets/owl.theme.default.min.css" rel="stylesheet">
		<link href="plugins/hover/hover-min.css" rel="stylesheet">		
		<link href="plugins/morphext/morphext.css" rel="stylesheet">
		
		<!-- The Project's core CSS file -->
		<!-- Use css/rtl_style.css for RTL version -->
		<link href="css/style.css" rel="stylesheet" >
		<!-- The Project's Typography CSS file, includes used fonts -->
		<!-- Used font for body: Roboto -->
		<!-- Used font for headings: Raleway -->
		<!-- Use css/rtl_typography-default.css for RTL version -->
		<link href="css/typography-default.css" rel="stylesheet" >
		<!-- Color Scheme (In order to change the color scheme, replace the blue.css with the color scheme that you prefer)-->
		<link href="css/skins/dark_cyan.css" rel="stylesheet">
		

		<!-- Custom css --> 
		<link href="css/custom.css" rel="stylesheet">
	</head>

	<!-- body classes:  -->
	<!-- "boxed": boxed layout mode e.g. <body class="boxed"> -->
	<!-- "pattern-1 ... pattern-9": background patterns for boxed layout mode e.g. <body class="boxed pattern-1"> -->
	<!-- "transparent-header": makes the header transparent and pulls the banner to top -->
	<!-- "gradient-background-header": applies gradient background to header -->
	<!-- "page-loader-1 ... page-loader-6": add a page loader to the page (more info @components-page-loaders.html) -->
	<body class="no-trans front-page transparent-header gradient-background-header ">

		<!-- scrollToTop -->
		<!-- ================ -->
		<div class="scrollToTop circle"><i class="icon-up-open-big"></i></div>
		
		<!-- page wrapper start -->
		<!-- ================ -->
		<div class="page-wrapper">
		
			<!-- header-container start -->
			<div class="header-container">
				<!-- header start -->
				<!-- classes:  -->
				<!-- "fixed": enables fixed navigation mode (sticky menu) e.g. class="header fixed clearfix" -->
				<!-- "dark": dark version of header e.g. class="header dark clearfix" -->
				<!-- "full-width": mandatory class for the full-width menu layout -->
				<!-- "centered": mandatory class for the centered logo layout -->
				<!-- ================ --> 
				<header class="header  fixed fixed-before full-width  clearfix">
					
								<!-- header-second start -->
								<!-- ================ -->
								<div class="header-second clearfix">
									<!-- main-navigation start -->
									<!-- classes: -->
									<!-- "onclick": Makes the dropdowns open on click, this the default bootstrap behavior e.g. class="main-navigation onclick" -->
									<!-- "animated": Enables animations on dropdowns opening e.g. class="main-navigation animated" -->
									<!-- "with-dropdown-buttons": Mandatory class that adds extra space, to the main navigation, for the search and cart dropdowns -->
									<!-- ================ -->
									<div class="main-navigation animated">

										<!-- navbar start -->
										<!-- ================ -->
										<nav class="navbar navbar-default" role="navigation">
											<div class="container-fluid">

												<!-- Toggle get grouped for better mobile display -->
												<div class="navbar-header">
													<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
														<span class="sr-only">Toggle navigation</span>
														<span class="icon-bar"></span>
														<span class="icon-bar"></span>
														<span class="icon-bar"></span>
													</button>
													
													<!-- header-first start -->
													<!-- ================ -->
													<div class="header-first clearfix">

														<!-- logo -->
														<div id="logo" class="logo">
															<a href="index.html"><img id="logo_img" src="images/logo_dark_cyan.png" alt="The Project"></a>
														</div>

														<!-- name-and-slogan -->
														<div class="site-slogan hidden-xs">
															Multipurpose HTML5 Template
														</div>

													</div>
													<!-- header-first end -->
													
												</div>

												<!-- Collect the nav links, forms, and other content for toggling -->
												<div class="collapse navbar-collapse scrollspy smooth-scroll" id="navbar-collapse-1">
													<ul class="nav navbar-nav navbar-right">
														<li class="dropdown active">
															<a href="#banner" class="dropdown-toggle" data-toggle="dropdown">Home</a>
															<ul class="dropdown-menu">
																<li><a href="index.html">Home - Default</a></li>
															</ul>
														</li>
														<li><a href="#about">About</a></li>
														<li><a href="#skills">Skills</a></li>
														<li><a href="#portfolio">Recent Projects</a></li>
														<li><a href="#footer">Contact</a></li>
													</ul>
												</div>

											</div>
										</nav>
										<!-- navbar end -->

									</div>
									<!-- main-navigation end -->
								</div>
								<!-- header-second end -->
					
				</header>
				<!-- header end -->
			</div>
			<!-- header-container end -->
		
			<!-- banner start -->
			<!-- ================ -->
			<div id="banner" class="banner clearfix">

				<!-- slideshow start -->
				<!-- ================ -->
				<div class="slideshow">

					<!-- slider revolution start -->
					<!-- ================ -->
					<div class="slider-revolution-5-container">
						<div id="slider-banner-fullscreen-hero" class="slider-banner-fullscreen-hero rev_slider" data-version="5.0">
							<ul class="slides">
								<!-- slide 1 start -->
								<!-- ================ -->
								<li data-transition="random" data-slotamount="default" data-masterspeed="default" data-title="Unlimited Options and Layouts">

								<!-- main image -->
								<img src="images/resume-slide-1.jpg" alt="slidebg1" data-bgposition="center top" data-kenburns="on" data-duration="30000" data-ease="Linear.easeNone" data-scalestart="100" data-scaleend="120" data-rotatestart="0" data-rotateend="0" data-offsetstart="0 0" data-offsetend="0 0" data-bgparallax="10" class="rev-slidebg" data-no-retina>

								<!-- Transparent Background -->
								<div class="tp-caption light-translucent-bg"
									style="background-color: rgba(255,255,255,0.1);"
									data-x="center"
									data-y="center"
									data-start="0"
									data-transform_in="opacity:0;s:600;e:Power2.easeInOut;"
									data-transform_out="opacity:0;s:600;s:300;"
									data-width="5000"
									data-height="5000">
								</div>

								<!-- LAYER NR. 1 -->
								<div class="tp-caption large_white dark-translucent-bg caption-box"
									data-x="left"
									data-y="200"
									data-start="500"
									data-transform_idle="o:1;"
									data-transform_in="y:[100%];opacity:0;s:1100;e:Power4.easeInOut;"
									data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
									>Hello I'm Robert White!
								</div>

								<!-- LAYER NR. 3 -->
								<div class="tp-caption medium_white dark-translucent-bg caption-box"
									data-x="left"
									data-y="292"
									data-start="650"
									data-transform_idle="o:1;"
									data-transform_in="y:[100%];opacity:0;s:1100;e:Power4.easeInOut;"
									data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
									data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;"
									data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;">Senior Web Developer
								</div>

								<!-- LAYER NR. 4 -->
								<div class="tp-caption"
									data-x="left"
									data-y="390"
									data-start="800"
									data-transform_idle="o:1;"
									data-transform_in="y:[100%];opacity:0;s:1100;e:Power4.easeInOut;"
									data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
									data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;"
									data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"><a href="#page-start" class="btn btn-default btn-lg margin-clear radius-50 smooth-scroll">More Details</a>
								</div>
								</li>
								<!-- slide 1 end -->
							</ul>
						</div>
					</div>
					<!-- slider revolution end -->

				</div>
				<!-- slideshow end -->

			</div>
			<!-- banner end -->

			<div id="page-start"></div>

			<!-- section start -->
			<!-- ================ -->
			<section id="about" class="light-gray-bg pv-20">
				<div class="container">
					<div class="row">
						<div class="col-md-8 col-md-offset-2 text-center pv-20">
							<br>
							<h1 class="title large"><span class="text-default">About</span> Me</h1>
							<div class="separator"></div>
							<p class="large">Hello I'm Robert. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi perferendis magnam ea necessitatibus, officiis voluptas odit! Aperiam omnis, cupiditate laudantium velit nostrum, exercitationem accusamus, possimus soluta illo deserunt tempora qui.</p>
						</div>
					</div>

					<!-- timeline grid start -->
					<!-- ================ -->
					<div class="timeline margin-clear clearfix">

						<!-- timeline grid item start -->
						<div class="timeline-item">
							<div class="white-bg shadow p-20 text-center object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
								<div class="timeline-date-label margin-clear clearfix">2011 - 2016</div>
								<h3>Web Developer at HtmlCoder</h3>
								<div class="separator"></div>
								<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et  sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas  ullamcorper commodo rutrum.</p>
							</div>
						</div>
						<!-- timeline grid item end -->

						<!-- timeline grid item start -->
						<div class="timeline-item pull-right">
							<div class="white-bg shadow p-20 text-center object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
								<div class="timeline-date-label margin-clear clearfix">2009 - 2011</div>
								<h3>Freelancer</h3>
								<div class="separator"></div>
								<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et  sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas  ullamcorper commodo rutrum.</p>
							</div>
						</div>
						<!-- timeline grid item end -->

						<!-- timeline grid item start -->
						<div class="timeline-item">
							<div class="white-bg shadow p-20 text-center object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
								<div class="timeline-date-label margin-clear clearfix">2008 - 2009</div>
								<h3>Manager at Gogole</h3>
								<div class="separator"></div>
								<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et  sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas  ullamcorper commodo rutrum.</p>
							</div>
						</div>
						<!-- timeline grid item end -->

						<!-- timeline grid item start -->
						<div class="timeline-item pull-right">
							<div class="white-bg shadow p-20 text-center object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
								<div class="timeline-date-label margin-clear clearfix">2006 - 2008</div>
								<h3>Manager at Pappla</h3>
								<div class="separator"></div>
								<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et  sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas  ullamcorper commodo rutrum.</p>
							</div>
						</div>
						<!-- timeline grid item end -->

						<!-- timeline grid item start -->
						<div class="timeline-item">
							<div class="white-bg shadow p-20 text-center object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
								<div class="timeline-date-label margin-clear clearfix">2004 - 2006</div>
								<h3>MSc Software Engineering</h3>
								<div class="separator"></div>
								<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et  sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas  ullamcorper commodo rutrum.</p>
							</div>
						</div>
						<!-- timeline grid item end -->

						<!-- timeline grid item start -->
						<div class="timeline-item pull-right">
							<div class="white-bg shadow p-20 text-center object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="100">
								<div class="timeline-date-label margin-clear clearfix">2000 - 2004</div>
								<h3>Bachelor Software Engineering</h3>
								<div class="separator"></div>
								<p>Mauris dolor sapien, malesuada at interdum ut, hendrerit eget lorem. Nunc interdum mi neque, et  sollicitudin purus fermentum ut. Suspendisse faucibus nibh odio, a vehicula eros pharetra in. Maecenas  ullamcorper commodo rutrum.</p>
							</div>
						</div>
						<!-- timeline grid item end -->

					</div>
					<!-- timeline grid end -->
				</div>
			</section>
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<section class="stats padding-bottom-clear dark-translucent-bg hovered" style="background-image:url('images/page-about-banner-1.jpg'); background-position: 50% 50%;">
				<div class="clearfix">
					<div class="col-md-3 pv-40 default-translucent-bg col-xs-12 col-sm-3 text-center">
						<div class="feature-box pv-20 object-non-visible" data-animation-effect="fadeIn" data-effect-delay="300">
							<h2><strong>Why Me?</strong></h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
						</div>
					</div>
					<div class="col-md-9 col-sm-9 col-xs-12">
						<div class="owl-carousel space-top content-slider">
							<div class="row">
								<div class="col-md-8 col-md-offset-2">
									<div class="testimonial text-center">
										<h3>Just Perfect!</h3>
										<div class="separator"></div>
										<div class="testimonial-body">
											<blockquote>
												<p>Sed ut perspiciatis unde omnis iste natu error sit voluptatem accusan tium dolore laud antium, totam rem dolor sit amet tristique pulvinar, turpis arcu rutrum nunc, ac laoreet turpis augue a justo.</p>
											</blockquote>
											<div class="testimonial-info-1">- Jane Doe</div>
											<div class="testimonial-info-2">By Company</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-8 col-md-offset-2">
									<div class="testimonial text-center">
										<h3>Amazing!</h3>
										<div class="separator"></div>
										<div class="testimonial-body">
											<blockquote>
												<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et cupiditate deleniti ratione in. Expedita nemo, quisquam, fuga adipisci omnis ad mollitia libero culpa nostrum est quia eos esse vel!</p>
											</blockquote>
											<div class="testimonial-info-1">- Jane Doe</div>
											<div class="testimonial-info-2">By Company</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- section end -->

			<!-- main-container start -->
			<!-- ================ -->
			<section id="skills" class="main-container">
				<div class="container">
					<div class="row">

						<!-- main start -->
						<!-- ================ -->
						<div class="main col-md-10 col-md-offset-1">

							<!-- page-title start -->
							<!-- ================ -->
							<h1 class="page-title">My Skills</h1>
							<div class="separator-2 mb-20"></div>
							<!-- page-title end -->

							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex. Suspendisse aliquet imperdiet commodo. Aenean vel lacinia elit. Class aptent taciti sociosqu ad litora torquent per.</p>
							<div class="progress style-1 dark">
								<span class="text"></span>
								<div class="progress-bar progress-bar-white" role="progressbar" data-animate-width="95%">
									<span class="label object-non-visible" data-animation-effect="fadeInLeftSmall" data-effect-delay="1000">CSS</span>
								</div>
							</div>
							<div class="progress style-1 dark">
								<span class="text"></span>
								<div class="progress-bar progress-bar-white" role="progressbar" data-animate-width="85%">
									<span class="label object-non-visible" data-animation-effect="fadeInLeftSmall" data-effect-delay="1000">HTML5</span>
								</div>
							</div>
							<div class="progress style-1 dark">
								<span class="text"></span>
								<div class="progress-bar progress-bar-white" role="progressbar" data-animate-width="95%">
									<span class="label object-non-visible" data-animation-effect="fadeInLeftSmall" data-effect-delay="1000">Design</span>
								</div>
							</div>
							<div class="progress style-1 dark">
								<span class="text"></span>
								<div class="progress-bar progress-bar-white" data-animate-width="80%">
									<span class="label object-non-visible" data-animation-effect="fadeInLeftSmall" data-effect-delay="1000">PHP</span>
								</div>
							</div>
							<div class="progress style-1 dark">
								<span class="text"></span>
								<div class="progress-bar progress-bar-white" data-animate-width="85%">
									<span class="label object-non-visible" data-animation-effect="fadeInLeftSmall" data-effect-delay="1000">jQuery</span>
								</div>
							</div>
							<div class="progress style-1 dark">
								<span class="text"></span>
								<div class="progress-bar progress-bar-white" data-animate-width="90%">
									<span class="label object-non-visible" data-animation-effect="fadeInLeftSmall" data-effect-delay="1000">Drupal</span>
								</div>
							</div>
							<p>Sed eget pulvinar quam, vel feugiat enim. Aliquam erat volutpat. Phasellus eu porta ipsum. Suspendisse aliquet imperdiet commodo. Aenean vel lacinia elit. Class aptent taciti sociosqu ad litora torquent per. Vestibulum velmo.</p>
							<ul class="list-icons">
								<li class="object-non-visible animated object-visible fadeInUpSmall" data-animation-effect="fadeInUpSmall"><i class="icon-check"></i> Etiam sed dolor ac diam volutpat</li>
								<li class="object-non-visible animated object-visible fadeInUpSmall" data-animation-effect="fadeInUpSmall" data-effect-delay="100"><i class="icon-check"></i> Sed eget pulvinar quam, vel feugiat enim aliquam </li>
								<li class="object-non-visible animated object-visible fadeInUpSmall" data-animation-effect="fadeInUpSmall" data-effect-delay="150"><i class="icon-check"></i> Erat volutpat. Phasellus eu porta ipsum suspendisse aliquet imperdiet</li>
								<li class="object-non-visible animated object-visible fadeInUpSmall" data-animation-effect="fadeInUpSmall" data-effect-delay="200"><i class="icon-check"></i> Phasellus eu porta ipsum. Suspendisse aliquet imperdiet commodo</li>
							</ul>
						</div>
						<!-- main end -->

					</div>
				</div>
			</section>
			<!-- main-container end -->

			<!-- section start -->
			<!-- ================ -->
			<section class="section dark-translucent-bg parallax background-img-1">
				<div class="container">
					<div class="clients-container">
						<div class="clients">
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="100">
								<a href="#"><img src="images/client-1.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="200">
								<a href="#"><img src="images/client-2.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="300">
								<a href="#"><img src="images/client-3.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="400">
								<a href="#"><img src="images/client-4.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="500">
								<a href="#"><img src="images/client-5.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="600">
								<a href="#"><img src="images/client-6.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="700">
								<a href="#"><img src="images/client-7.png" alt=""></a>
							</div>
							<div class="client-image object-non-visible" data-animation-effect="fadeIn" data-effect-delay="800">
								<a href="#"><img src="images/client-8.png" alt=""></a>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<section id="portfolio" class="section pv-40 light-gray-bg">
				<div class="container">
					<div class="row">
						<div class="col-md-8 col-md-offset-2 text-center">
							<h2 class="title"><span class="text-muted">Recent</span> <span class="text-default">Projects</span></h2>
							<div class="separator"></div>
							<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit Illo quaerat <br> commodi excepturi dignissimos!</p>
							<br>
						</div>
					</div>
					<div class="col-md-10 col-md-offset-1">
						<div class="image-box style-3-b">
							<div class="row">
								<div class="col-sm-6 col-md-4">
									<div class="shadow bordered">
										<img src="images/portfolio-1.jpg" alt="">
									</div>
								</div>
								<div class="col-sm-6 col-md-8">
									<div class="body">
										<h3 class="title"><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small mb-10"><i class="icon-calendar"></i> Feb, 2016 <i class="pl-10 icon-tag-1"></i> Web Design</p>
										<div class="separator-2"></div>
										<p class="mb-10">Lorem ipsum dolor sit amet, adipisicing elit. Aliquam atque ipsam nihialal. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam laudantium, provident culpa saepe.</p>
										<p><a href="portfolio-item.html">Read More</a></p>
									</div>
								</div>
							</div>
						</div>
						<div class="image-box style-3-b">
							<div class="row">
								<div class="col-sm-6 col-md-4">
									<div class="shadow bordered">
										<img src="images/portfolio-2.jpg" alt="">
									</div>
								</div>
								<div class="col-sm-6 col-md-8">
									<div class="body">
										<h3 class="title"><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small mb-10"><i class="icon-calendar"></i> Feb, 2016 <i class="pl-10 icon-tag-1"></i> Web Design</p>
										<div class="separator-2"></div>
										<p class="mb-10">Lorem ipsum dolor sit amet, adipisicing elit. Aliquam atque ipsam nihialal. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam laudantium, provident culpa saepe.</p>
										<p><a href="portfolio-item.html">Read More</a></p>
									</div>
								</div>
							</div>
						</div>
						<div class="image-box style-3-b">
							<div class="row">
								<div class="col-sm-6 col-md-4">
									<div class="shadow bordered">
										<img src="images/portfolio-3.jpg" alt="">
									</div>
								</div>
								<div class="col-sm-6 col-md-8">
									<div class="body">
										<h3 class="title"><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small mb-10"><i class="icon-calendar"></i> Feb, 2016 <i class="pl-10 icon-tag-1"></i> Web Design</p>
										<div class="separator-2"></div>
										<p class="mb-10">Lorem ipsum dolor sit amet, adipisicing elit. Aliquam atque ipsam nihialal. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam laudantium, provident culpa saepe.</p>
										<p><a href="portfolio-item.html">Read More</a></p>
									</div>
								</div>
							</div>
						</div>
						<div class="image-box style-3-b">
							<div class="row">
								<div class="col-sm-6 col-md-4">
									<div class="shadow bordered">
										<img src="images/portfolio-4.jpg" alt="">
									</div>
								</div>
								<div class="col-sm-6 col-md-8">
									<div class="body">
										<h3 class="title"><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small mb-10"><i class="icon-calendar"></i> Feb, 2016 <i class="pl-10 icon-tag-1"></i> Web Design</p>
										<div class="separator-2"></div>
										<p class="mb-10">Lorem ipsum dolor sit amet, adipisicing elit. Aliquam atque ipsam nihialal. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam laudantium, provident culpa saepe.</p>
										<p><a href="portfolio-item.html">Read More</a></p>
									</div>
								</div>
							</div>
						</div>
						<div class="image-box style-3-b">
							<div class="row">
								<div class="col-sm-6 col-md-4">
									<div class="shadow bordered">
										<img src="images/portfolio-5.jpg" alt="">
									</div>
								</div>
								<div class="col-sm-6 col-md-8">
									<div class="body">
										<h3 class="title"><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small mb-10"><i class="icon-calendar"></i> Feb, 2016 <i class="pl-10 icon-tag-1"></i> Web Design</p>
										<div class="separator-2"></div>
										<p class="mb-10">Lorem ipsum dolor sit amet, adipisicing elit. Aliquam atque ipsam nihialal. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam laudantium, provident culpa saepe.</p>
										<p><a href="portfolio-item.html">Read More</a></p>
									</div>
								</div>
							</div>
						</div>
						<div class="image-box style-3-b">
							<div class="row">
								<div class="col-sm-6 col-md-4">
									<div class="shadow bordered">
										<img src="images/portfolio-6.jpg" alt="">
									</div>
								</div>
								<div class="col-sm-6 col-md-8">
									<div class="body">
										<h3 class="title"><a href="portfolio-item.html">Project Title</a></h3>
										<p class="small mb-10"><i class="icon-calendar"></i> Feb, 2016 <i class="pl-10 icon-tag-1"></i> Web Design</p>
										<div class="separator-2"></div>
										<p class="mb-10">Lorem ipsum dolor sit amet, adipisicing elit. Aliquam atque ipsam nihialal. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam laudantium, provident culpa saepe.</p>
										<p><a href="portfolio-item.html">Read More</a></p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- section end -->

			<!-- section start -->
			<!-- ================ -->
			<section class="dark-translucent-bg hovered background-img-6">
				<!-- footer top start -->
				<!-- ================ -->
				<div class="border-clear footer-top animated-text default-hovered">
					<div class="container">
						<div class="row">
							<div class="col-md-12">
								<div class="call-to-action text-center">
									<div class="row">
										<div class="col-sm-8">
											<h2>Powerful Bootstrap Template</h2>
											<h2>Waste no more time</h2>
										</div>
										<div class="col-sm-4">
											<p class="mt-10"><a href="#" class="btn btn-animated btn-lg btn-gray-transparent radius-50">Purchase<i class="fa fa-cart-arrow-down pl-20"></i></a></p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- footer top end -->
			</section>
			<!-- section end -->
			<!-- footer start (Add "dark" class to #footer in order to enable dark footer) -->
			<!-- ================ -->
			<footer id="footer" class="clearfix ">

				<!-- .footer start -->
				<!-- ================ -->
				<div class="footer">
					<div class="container">
						<div class="footer-inner">
							<div class="row">
								<div class="col-sm-6 col-md-3 col-lg-4 col-lg-offset-1">
									<div class="footer-content">
										<h2 class="title">Find Me</h2>
										<ul class="list-icons">
											<li><i class="fa fa-map-marker pr-10 text-default"></i> One infinity loop, 54100</li>
											<li><i class="fa fa-phone pr-10 text-default"></i> +00 1234567890</li>
											<li><a href="mailto:info@theproject.com"><i class="fa fa-envelope-o pr-10"></i>info@theproject.com</a></li>
										</ul>
										<a class="collapsed map-show btn-lg-link padding-hor-clear" data-toggle="collapse" href="#collapseContact" aria-expanded="false" aria-controls="collapseContact"><i class="fa fa-envelope pr-20"></i>Contact Me</a>
									</div>
								</div>
								<div class="col-sm-6 col-md-3 col-lg-4 col-lg-offset-1">
									<div class="footer-content">
										<h2 class="title">Follow Me</h2>
										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro fugiat accusantium similique modi alias consectetur nesciunt.</p>
										<ul class="social-links large circle animated-effect-1">
											<li class="facebook"><a target="_blank" href="http://www.facebook.com"><i class="fa fa-facebook"></i></a></li>
											<li class="twitter"><a target="_blank" href="http://www.twitter.com"><i class="fa fa-twitter"></i></a></li>
											<li class="googleplus"><a target="_blank" href="http://plus.google.com"><i class="fa fa-google-plus"></i></a></li>
											<li class="linkedin"><a target="_blank" href="http://www.linkedin.com"><i class="fa fa-linkedin"></i></a></li>
											<li class="xing"><a target="_blank" href="http://www.xing.com"><i class="fa fa-xing"></i></a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="clearfix visible-sm"></div>
								<section id="collapseContact" class="collapse">
									<div class="col-md-10 col-md-offset-1">
										<div class="footer-content">
											<h2 class="title">Contact Me</h2>
											<div class="alert alert-success hidden" id="MessageSent2">
												We have received your message, we will contact you very soon.
											</div>
											<div class="alert alert-danger hidden" id="MessageNotSent2">
												Oops! Something went wrong please refresh the page and try again.
											</div>
											<form role="form" id="footer-form" class="margin-clear">
												<div class="row">
													<div class="col-sm-6">
														<div class="form-group has-feedback mb-10">
															<label class="sr-only" for="name2">Name</label>
															<input type="text" class="form-control" id="name2" placeholder="Name" name="name2">
															<i class="fa fa-user form-control-feedback"></i>
														</div>
													</div>
													<div class="col-sm-6">
														<div class="form-group has-feedback mb-10">
															<label class="sr-only" for="email2">Email address</label>
															<input type="email" class="form-control" id="email2" placeholder="Enter email" name="email2">
															<i class="fa fa-envelope form-control-feedback"></i>
														</div>
													</div>
												</div>
												<div class="form-group has-feedback mb-10">
													<label class="sr-only" for="message2">Message</label>
													<textarea class="form-control" rows="4" id="message2" placeholder="Message" name="message2"></textarea>
													<i class="fa fa-pencil form-control-feedback"></i>
												</div>
												<input type="submit" value="Send" class="margin-clear submit-button radius-50 btn btn-default">
											</form>
										</div>
									</div>
								</section>
							</div>
						</div>
					</div>
				</div>
				<!-- .footer end -->

				<!-- .subfooter start -->
				<!-- ================ -->
				<div class="subfooter">
					<div class="container">
						<div class="subfooter-inner">
							<div class="row">
								<div class="col-md-12">
									<p class="text-center">Copyright © 2017 The Project by <a target="_blank" href="http://htmlcoder.me">HtmlCoder</a>. All Rights Reserved</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- .subfooter end -->

			</footer>
			<!-- footer end -->
			
		</div>
		<!-- page-wrapper end -->

		<!-- JavaScript files placed at the end of the document so the pages load faster -->
		<!-- ================================================== -->
		<!-- Jquery and Bootstap core js files -->
		<script type="text/javascript" src="plugins/jquery.min.js"></script>
		<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
		<!-- Modernizr javascript -->
		<script type="text/javascript" src="plugins/modernizr.js"></script>
		<script type="text/javascript" src="plugins/rs-plugin-5/js/jquery.themepunch.tools.min.js?rev=5.0"></script>
		<script type="text/javascript" src="plugins/rs-plugin-5/js/jquery.themepunch.revolution.min.js?rev=5.0"></script>
		<!-- Isotope javascript -->
		<script type="text/javascript" src="plugins/isotope/isotope.pkgd.min.js"></script>
		<!-- Magnific Popup javascript -->
		<script type="text/javascript" src="plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
		<!-- Appear javascript -->
		<script type="text/javascript" src="plugins/waypoints/jquery.waypoints.min.js"></script>
		<!-- Count To javascript -->
		<script type="text/javascript" src="plugins/jquery.countTo.js"></script>
		<!-- Parallax javascript -->
		<script src="plugins/jquery.parallax-1.1.3.js"></script>
		<!-- Contact form -->
		<script src="plugins/jquery.validate.js"></script>
		<!-- Morphext -->
		<script type="text/javascript" src="plugins/morphext/morphext.min.js"></script>
		<!-- Google Maps javascript -->
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;key=your_google_map_key"></script>
		<script type="text/javascript" src="js/google.map.config.js"></script>
		<!-- Background Video -->
		<script src="plugins/vide/jquery.vide.js"></script>
		<!-- Owl carousel javascript -->
		<script type="text/javascript" src="plugins/owlcarousel2/owl.carousel.min.js"></script>
		<!-- SmoothScroll javascript -->
		<script type="text/javascript" src="plugins/jquery.browser.js"></script>
		<script type="text/javascript" src="plugins/SmoothScroll.js"></script>
		<!-- Initialization of Plugins -->
		<script type="text/javascript" src="js/template.js"></script>
		<!-- Custom Scripts -->
		<script type="text/javascript" src="js/custom.js"></script>

	</body>
</html>
